<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="title">客服设置</div>
      <a-alert message="此配置用于设置客服ID, 请设置成手机号" type="info" show-icon style="margin: 24px 0" />
      <a-form-model
        ref="kefuForm"
        :model="formInfo"
        :labelCol="{ span: 2 }"
        :wrapperCol="{ span: 7 }"
        v-loading="loading"
      >
        <a-form-model-item label="客服手机号" prop="kefu_id">
          <a-input v-model="formInfo.kefu_id" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 7, offset: 2 }">
          <a-button :loading="btnLoading" type="primary" @click="submitForm"> 保存 </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { getKefuInfo, setKefuInfo } from '@/api/purchase/supplier'

export default {
  name: 'kefu',
  data () {
    return {
      loading: false,
      formInfo: {
        kefu_id: ''
      },
      btnLoading: false
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData: function () {
      this.loading = true
      getKefuInfo({})
        .then((res) => {
          if (res.code == 0) {
            this.formInfo.kefu_id = res.data.kefu_id
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.loading = false
        })
    },
    submitForm: function () {
      this.btnLoading = true
      setKefuInfo({
        kefu_id: this.formInfo.kefu_id
      })
        .then((res) => {
          if (res.code == 0) {
            this.$message.success(res.msg)
          } else {
            this.$message.warning(res.msg)
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.btnLoading = false
        })
    }
  }
}
</script>
<style scoped>
</style>
